<script setup lang="ts">
import { reactive, Ref, ref } from "vue";
import { Toast } from "vant";
import ConsultItem from "@/views/user/views/consultPage/components/consultItem.vue";
import type { ConsultOrderItem, ConsultOrderListParams } from "@/types/consultTypes/consultTypes.ts";
import { fetchConsultOrderListAPI } from "@/api/consultApi/consultApi.ts";

const props = defineProps<{
   type: number
}>();

const orderList: Ref<ConsultOrderItem[]> = ref<ConsultOrderItem[]>([]);
const loading: Ref<boolean> = ref<boolean>(false);
const total: Ref<number> = ref<number>(0);
const finished: Ref<boolean> = ref(false);
const params = reactive<ConsultOrderListParams>({
   current: 1,
   pageSize: 10,
   type: props.type,
});

const onLoad = async () => {
   try {
      const { data } = await fetchConsultOrderListAPI(params);
      total.value = data.total;
      orderList.value.push(...data.rows);
      if (orderList.value.length >= total.value) {
         finished.value = true;
      } else {
         params.current++;
      }
   } catch (error: any) {
      Toast.fail(error.message);
   }
};

const deleteSuccess = (id: string) => {
   orderList.value = orderList.value.filter(item => item.id !== id);
};

</script>

<template>
   <div class="consult-list">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
         <consult-item v-for="(order) in orderList" :key="order.id" :item="order" @deleteSuccess="deleteSuccess" />
      </van-list>

   </div>
</template>

<style scoped lang="scss">
.consult-list {
   padding: 10px 15px;
}
</style>
